Het XMLHttpRequest object

Met het XMLHttpRequest object kan je onderdelen van een webpagina updaten zonder de gehele pagina opnieuw te laden. Met het XMLHttpRequest object kan je data uitwisselen met de server achter de schermen. Je gebruikt het XMLHttpRequest object om:

de pagina te updaten zonder de gehele pagina opnieuw te laden;
data sturen naar de server nadat de pagina geladen is;
data van de server ontvangen nadat de pagina geladen is;
data versturen naar de server op de achtergrond;

`XMLHttpRequest` object methoden

Methode Beschrijving

abort() Annuleert de lopende aanvraag

getAllResponseHeaders() retourneert header informatie

getResponseHeader() retourneert specifieke header informatie

open(method,url,async,uname,pswd)

Specificeert:

method: het type aanvraag GET of POST;
URL: de locatie van het bestand op de server;
async: als de aanvraag asynchroon moet worden uitgevoerd of niet, true asynchroon, false synchroon,
en andere optionele attributen van een aanvraag

overrideMimeType(string)

De XMLHttpRequest-methode overrideMimeType() specificeert een ander MIME-type dan dat van de server. Dat expliciet opgegeven MIME-type zal worden gebruikt bij het interpreteren van de gegevens die in het verzoek worden overgedragen. Dit kan bijvoorbeeld worden gebruikt om een stream te dwingen de gegevens als "text/xml" in te lezen. Deze methode moet worden aangeroepen vóór de send().

`.css`	Cascading Style Sheets (CSS)	`text/css`
`.csv`	Comma-separated values (CSV)	`text/csv`
`.doc`	Microsoft Word	`application/msword`
`.docx`	Microsoft Word (OpenXML)	`application/vnd.openxmlformats-officedocument.wordprocessingml.document`
`.eot`	MS Embedded OpenType fonts	`application/vnd.ms-fontobject`
`.epub`	Electronic publication (EPUB)	`application/epub+zip`
`.gz`	GZip Compressed Archive	`application/gzip`
`.gif`	Graphics Interchange Format (GIF)	`image/gif`
`.htm .html`	HyperText Markup Language (HTML)	`text/html`
`.ico`	Icon format	`image/vnd.microsoft.icon`
`.ics`	iCalendar format	`text/calendar`
`.jar`	Java Archive (JAR)	`application/java-archive`
`.jpeg` `.jpg`	JPEG images	`image/jpeg`
`.js`	JavaScript	`text/javascript`
`.json`	JSON format	`application/json`

send(string) stuurt de aanvraag naar de server
string: alleen gebruikt voor POST aanvragen

setRequestHeader() Voegt een label/value paar aan de te versturen header toe

`XMLHttpRequest` object eigenschappen

Eigenschap	Beschrijving
`onreadystatechange`	hierin wordt een functie of de naam van een functie opgeslagen die automatisch wordt uitgevoerd telkens wanneer de `readyState` eigenschap verandert
`readyState`	bevat de status van het `XMLHttpRequest`. De status gaat van 0 naar 4: 0: request is niet geïnitialiseerd 1: connectie met de server is gemaakt 2: request ontvangen 3: request is in behandeling 4: request is afgewerkt en het antwoord staat klaar
`responseText`	retourneert de antwoordgegevens als een string
`responseXML`	retourneert de antwoordgegevens als XML data
`status`	retourneert het status-getal(e.g. "404" voor "Not Found" of "200" for "OK")
`statusText`	retourneert de status-tekst (e.g. "Not Found" of "OK")

Voorbeelden

Een lokaal html bestand laden

Wanneer de gebruiker op de knop klikt wordt een lokaal bestand geladen en in het html element waarvan de id gelijk is aan demo geplaatst zonder dat de hele pagina opnieuw wordt ingeladen. De anonieme functie, die toegekend wordt aan de onreadystatechange eigenschap kijkt als de server de request heeft behandelt en als het antwoord klaarstaat. Als dit zo is wordt de tekst die retourneerd werd in de eigenschap responseText in de tekstnode van het demo element geplaatst. Let erop dat we het text/html MIME type opgeven.
```
<!DOCTYPE html>
<html>
<body>
<h2>Het XMLHttpRequest object gebruiken om een lokaal bestand in te laden</h2>
<button type="button" onclick="loadHtmlPage()">Toon Jommeke boeken</button>
<p id="demo"></p>
<script>
function loadHtmlPage() {
  var ajax;
  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  } else {
    // code for older browsers
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  ajax.overrideMimeType("text/html");
  // callback functie
  ajax.onreadystatechange = function() {
      // server sent response and
      // OK 200 The request was fulfilled.
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  ajax.open("GET", "data/jommeke.html", true);
  ajax.send();
}
</script>
</body>
</html>
```
In JavaScript verwijst this altijd naar de "eigenaar" van de functie die we uitvoeren, of liever, naar het object waarvan de functie een methode is. Toen we onze functie loadHtmlPage() definiëerden op de pagina, is de eigenaar de pagina, of beter gezegd, het window object (of BOM - Global object) van JavaScript. Dit "eigendomsrecht" is het resultaat van JavaScript's object-georiënteerde aanpak. Dus this verwijst hier naar de variabele ajax en die is een instantie van het XMLHttpObject. Waarom gebruiken we this.readyState in de anonieme callback functie en niet ajax.readyState? In dit voorbeeld kunnen we evengoed ajax.readyState gebruiken:
```
if (ajax.readyState == 4 && ajax.status == 200)
```

Het lokale bestand dat in de url wordt meegegeven staat in de map data en heet jommeke.html:

<table id="jommeke-boeken" class="spreadsheet">
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <caption>Boeken van Jommeke</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Titel</th>
            <th scope="col">Kaft</th>
            <th scope="col">&euro;</th>
            <th scope="col">&yen;</th>
            <th scope="col">&pound;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jacht op een voetbal</td>
            <td>Softcover</td>
            <td>5,22</td>
            <td>34</td>
            <td>3,76</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>De zingende aap</td>
            <td>Softcover</td>
            <td>5,22</td>
            <td>34</td>
            <td>3,76</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>De Koningin van Onderland</td>
            <td>Hardcover</td>
            <td>8,22</td>
            <td>54,1</td>
            <td>5,91</td>
        </tr>
        ...
    </tbody>
</table>

Een json bestand laden

Let erop dat we het application/json MIME type opgeven. Deze functie neemt als argument de naam van het te laden bestand aan en de naam van de callback functie die moet worden uitgevoerd één keer het bestand ingeladen is.

function loadJSON(fileName, callback) {
    let ajax = new XMLHttpRequest();
    ajax.overrideMimeType("application/json");
    ajax.open('GET', 'appDataServices.json', true); // Replace 'appDataServices' with the path to your file
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == "200") {
            // Required use of an anonymous callback as .open will 
            // NOT return a value but simply returns undefined in asynchronous mode
            callback(this.responseText);
        }
    };
    ajax.send(null);
}

2020-04-14 10:55:17

Het XMLHttpRequest object

Het XMLHttpRequest object

XMLHttpRequest object methoden

XMLHttpRequest object eigenschappen

Voorbeelden

`XMLHttpRequest` object methoden

`XMLHttpRequest` object eigenschappen